@import 'config';
.order-detail{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding-bottom: px2rem(44px);
  overflow: hidden;
  box-sizing: border-box;
  background-color: $light;
}

.step,.order-canncel-tips {
	padding: px2rem(20px) px2rem(20px);
	background-color: $light;
	font-size: px2rem(12px);
}
.step{
	display: flex;
	&>.item{
		flex: 1;
		position: relative;
		padding-top: px2rem(18px);
		text-align: center;
		.icon-circle{
			position: absolute;
			left: 50%;
			top: 0;
			width: px2rem(8px);
			height: px2rem(8px);
			margin-left: px2rem(-4px);
			background-color: $dark;
			border-radius: 50%;
		}
		.txt{color: $dark;}
		&:after{
			content: '';
			position: absolute;
			left: 0;
			top: px2rem(3.5px);
			width: 100%;
			height: px2rem(1px);
			background-color: $dark;
		}
		&.first, &:first-child{
			&:after{
				width: 50%;
				left: 50%;
			}
		}
		&.last, &:last-child{
			&:after{
				width: 50%;
			}
		}
		&.step-1,&.step-2,&.step-3,&.step-4 {
			.icon-circle{
				background-color: $primary;
			}
			&:after{
				background-color: $primary;
			}
			.txt{color: $primary;}
		}
	}
}
.order-canncel-tips {
	text-align: center;
	.title{
		margin-bottom: px2rem(10px);
		font-size: px2rem(16px);
		color: $red;
	}
	p{
		font-size: px2rem(10px);
		line-height: 1.5;
		color: $darker;
	}
}

.order-info{
	font-size: px2rem(12px);
	line-height: 1.5;
	.title {
		color: $darker;
	}
}

.total-info{
	padding: px2rem(10px);
	text-align: right;
	line-height: 1.5;
	font-size: px2rem(12px);
	color: $red;
	background-color: $white;
	p{
		display: flex;
	}
	.title{
		flex: 1;
		color: $darker;
		margin-right: px2rem(2px);
	}
	.price{
		width: px2rem(80px);
	}
}
.total-info-ft{
	.price{
		color: $red;
		font-size: px2rem(14px);
	}
}
.deliver{
	border-bottom: px2rem(1px) solid darken($light, 5%);
	// border-width: px2rem(1px) 0; 
	color: $black;
	&>.hd{
		height: px2rem(32px);
		padding: 0 px2rem(10px);
		border-bottom: px2rem(1px) solid darken($light, 5%);
		font-size: px2rem(12px);
		line-height: px2rem(32px);
	}
	.title{
		color: $darker;
		margin-right: px2rem(2px);
	}
	&>.bd{
		display: flex;
		height: px2rem(20px);
		padding: px2rem(5px) px2rem(10px);
		font-size: px2rem(12px);
		align-items: center;
		background-color: $white;
		.left{
			flex: 1;
		}
	}
	&>.ft{
		padding: 0 px2rem(10px) px2rem(10px);
		font-size: px2rem(12px);
		line-height: 1.5;
		background-color: $white;
	}
}

.order-detail-bottom{
	position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
}
.order-canncel{
	font-size: px2rem(14px);
	padding: 0 px2rem(20px);
	height: px2rem(44px);
	line-height: px2rem(44px);
	color: $white;
	background-color: $darker;
}
.order-gotopay, .order-received{
  flex: 1;
  height: px2rem(44px);
  line-height: px2rem(44px);
  color: $white;
  font-size: px2rem(14px);
  text-align: center;
  padding: 0 px2rem(10px);
  background-color: $red;
  box-sizing: border-box;
}
.order-received{
	background-color: $green;
}
.contact{
	.icon{
		color: $darker;
	}
}





